<template>
	<view class="share-poster-contanier">
		<u-popup :show="show" :round="20" mode="bottom" :closeable="true" @close="show=false" @open="show=true" :overlay="false">
			<view class="share-btns">
				<view class="item-btn">
					<view class="btn-icon">
						<button class=" btn-normal" id="shareBtn" open-type="share">
							<unt-icon name="icon-weixin2" size="30" color="#ffffff"></unt-icon>
						</button>
					</view>
					<view class="title">发送给朋友</view>
				</view>
				<view class="item-btn" @click="getQrCode()">
					<view class="btn-icon">
						<unt-icon name="icon-tupian" size="26" color="#ffffff"></unt-icon>
					</view>
					<view class="title">生成海报</view>
				</view>
				<!-- <view class="item-btn">
					<view class="btn-icon">
						<unt-icon name="icon-lianjie" size="30" color="#ffffff" @click="copyLink"></unt-icon>
					</view>
					<view class="title">复制链接</view>
				</view> -->
				<view class="close-title" @click="show=false">关闭</view>
			</view>
		</u-popup>
		<view class="canvas-contanier" :class="canva.show ? 'canvas-show' : 'canvas-hide'" @click="hideCanvas">
			<!-- 生成海报的canvas -->
			<canvas class="my-canvas" id="myCanvas" canvas-id="myCanvas" @longpress.stop="saveSharePic"></canvas>
			<view class="canvas-tip">长按可保存海报</view>
		</view>
	</view>
</template>

<script>
	import {
		qrCode
	} from "@/api/setting.js"
	export default {
		name: 'share-poster',
		props: {
			goods: {
				type: Object,
				default: ''
			}
		},
		data() {
			return {
				show: false,
				QRcode: "",
				canva: {
					show: false
				}
			}
		},
		mounted() {

		},
		methods: {
			hideCanvas(){
				this.canva.show=false;
			},
			shows() {
				this.show = true;
			},
			getQrCode() {
				qrCode({
					path: '/pages_moon/goods/detail/detail?id=' + this.goods.goodsId
				}).then(res => {
					this.QRcode=res.data;
					this.generatePoster();
				})
			},
			// 生成海报
		 generatePoster() {
				const app = this;
				app.show = false;
				app.canva.show = true;
				let context = uni.createCanvasContext('myCanvas',this);
			    this.initialization(context);
				this.drawTextTitle(this.goods.goodsName, 15, 262, 22, context, 15, 18,
					"#000000");
				this.drawTextTitle(this.goods.sellingPoint, 15, 310, 16, context, 19, 14,
					"#999999");
				// 绘制价格
				context.setFontSize(18);
				context.setFillStyle('red');
				context.fillText(`￥${this.goods.goodsPriceMin}`, 15, 410);
				// 绘制说明
				context.setFillStyle('#f2f2f2');
				context.fillRect(20, 435, 120, 30);
				context.setFontSize(14);
				context.setFillStyle("#999999");
				context.fillText('长按识别小程序', 30, 455);
				uni.downloadFile({
					url: app.QRcode,
					success: function(res) {
						context.drawImage(res.tempFilePath, 175, 375, 105, 105);
						context.draw(true);
						app.drawImage(context);
					}
				});
			},
			initialization(context) {
				const x = 0;
				const y = 0;
				const width = 300;
				const height = 600;
				context.setFillStyle('#ffffff');
				context.fillRect(x, y, width, height);
				context.draw();
			},
			// 绘制商品图
			drawImage(context) {
				const app = this;
				const x = 15;
				const y = 10;
				const width = 270;
				const height = 250;
				const cornerRadius = 5; // 圆角半径
				context.beginPath();
				context.moveTo(x + cornerRadius, y);
				context.lineTo(x + width - cornerRadius, y);
				context.arcTo(x + width, y, x + width, y + cornerRadius, cornerRadius);
				context.lineTo(x + width, y + height - cornerRadius);
				context.arcTo(x + width, y + height, x + width - cornerRadius, y + height, cornerRadius);
				context.lineTo(x + cornerRadius, y + height);
				context.arcTo(x, y + height, x, y + height - cornerRadius, cornerRadius);
				context.lineTo(x, y + cornerRadius);
				context.arcTo(x, y, x + cornerRadius, y, cornerRadius);
				context.closePath();
				context.clip(); // 裁剪路径内的区域
				// 绘制商品详情
				uni.downloadFile({
					url: app.goods.image.url,
					success: function(res) {
						context.drawImage(res.tempFilePath, x, y, width, height);
						context.draw(true);
					}
				});
			},
			// 商品名称文字换行
			drawTextTitle(text, x, y, ys, context, n, size, color) {
				let strArr = [];
				for (let i = 0, l = text.length; i < l / n; i++) {
					let a = text.slice(n * i, n * (i + 1));
					strArr.push(a);
				}
				strArr.forEach((item, index) => {
					// 限制只能显示4行文字
					if (index > 1) {
						return;
					}
					y += ys;
					context.setFontSize(size);
					context.setFillStyle(color);
					context.fillText(item, x, y);
				});
			},
			// 长按保存生成的海报
			saveSharePic() {
				const apps=this;
				uni.showModal({
					title: '提示',
					content: '确定要保存分享海报吗？',
					success: function(res) {
						if (res.confirm) {
							console.log("save-img")
							// canvas生成图片
							uni.canvasToTempFilePath({
								// 这里修改保存的图片格式
								fileType: 'jpg',
								canvasId: 'myCanvas',
								quality: 1,
								success: function(res) {
									// 保存带哦本地
									uni.saveImageToPhotosAlbum({
										filePath: res.tempFilePath,
										success: function() {
											uni.showToast({
												title: '保存海报成功',
												icon: 'none',
												duration: 3000
											});
											apps.canva.show = false;
										},
										fail: function() {
											uni.showToast({
												title: '保存海报失败',
												icon: 'none',
												duration: 3000
											});
										}
									});
								}
							},apps);
						}
					}
				});
			}
		},
		/**
		 * 设置分享内容
		 */
		onShareAppMessage() {
			const app = this
			return {
				title: app.goods.name,
				imageUrl: app.goods.image.url,
				imagePreviewUrl: app.goods.image.url,
				path: '/pages_moon/goods/detail/detail?id=' + app.goods.goodsId
			}
		},

		/**
		 * 分享到朋友圈
		 * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
		 * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
		 */
		onShareTimeline() {
			const app = this
			return {
				title: app.goods.name,
				imageUrl: app.goods.image.url,
				imagePreviewUrl: app.goods.image.url,
				path: '/pages_moon/goods/detail/detail?id=' + app.goods.goodsId
			}
		}
	}
</script>

<style scoped lang="scss">
	.share-poster-contanier {
		width: 100%;

		// position: fixed;
		// left: 0px;
		// top: 0px;
		// width: 100%;
		// height: 100vh;
		// background-color:rgba(0, 0, 0, 0.6) ;
		// z-index: 99999;
		// display: flex;
		// align-items: center;
		// justify-content: center;
		// flex-direction: column;
		.canvas-show{
			display: flex !important;
		}
		.canvas-hide{
			display: none !important;
		}
		.share-btns {
			width: 100%;
			height: 180px;
			@include flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;

			.item-btn {
				width: 100px;
				height: 120px;
				@include flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;

				.btn-icon {
					width: 60px;
					height: 60px;
					border-radius: 50%;
					background-color: #28C445;
					@include flex;
					justify-content: center;
					align-items: center;
				}

				.title {
					margin-top: 10px;
					font-size: 14px;
				}
			}

			.close-title {
				width: 100%;
				margin-top: 10px;
				text-align: center;
				padding-bottom: 15px;
			}
		}

		.canvas-contanier {
			position: fixed;
			left: 0px;
			top: 0px;
			width: 100%;
			height: 100vh;
			background-color: rgba(0, 0, 0, 0.6);
			z-index: 99999;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			.canvas-tip {
				color: #ffffff;
				font-size: 24rpx;
				margin-top: 30rpx;
				text-align: center;
			}

			.my-canvas {
				width: 300px;
				height: 950rpx;
				// background-color: #ffffff;
				margin-bottom: 50rpx;
			}
		}

	}
</style>